<template>
  <div class="cms-category-container">
    <!-- <span>组件2：使用子栏目的封面图片列出子栏目</span> -->
    <!-- 当前栏目的子栏目列表为空，仅显示当前栏目名称 -->
    <a-list size="small" :bordered="false" :split="false" v-if="
      currentCategoryChildsData.childs === undefined || currentCategoryChildsData.childs === null
    ">
      <template #header>
        <div class="category-title">
          <div class="category-title-prefix">
            <img v-if="projectCode === 'yzh'" class="img-yzh" />
            <img v-else-if="projectCode === 'ky'" class="img-ky" />
            <img v-else class="img-qc" />
          </div>
          <div class="category-title-text" style="font-family: 'Microsoft YaHei'">{{
            category.name
          }}</div>
        </div>
        <div style="height: 1px; width: 100%">
          <a-divider style="border-color: #ccc; height: 1px" />
        </div>
      </template>
    </a-list>

    <!-- 当前栏目的子栏目列表不为空，显示子栏目封面图片文件列表 -->
    <a-list size="small" :bordered="false" :split="false" :data-source="currentCategoryChildsData.childs" v-else>
      <template #renderItem="{ item }">
        <!-- 如果当前栏目的子栏目中有封面图片文件则显示出来，点击封面图片跳转到对应栏目的文章列表 -->
        <a-list-item class="category-article-row">
          <div class="coverImg">
            <img v-if="item.cover != null && item.cover != undefined && item.cover != ''" style="cursor: pointer"
              :src="getImageFileUrlPrefix + item.cover" @click="onClickCoverOrLoadMoreArticles(item)" />
          </div>
        </a-list-item>
      </template>
      <template #header>
        <div class="category-title">
          <div class="category-title-prefix">
            <img v-if="projectCode === 'yzh'" class="img-yzh" />
            <img v-else-if="projectCode === 'ky'" class="img-ky" />
            <img v-else class="img-qc" />
          </div>
          <div class="category-title-text" style="font-family: 'Microsoft YaHei'">{{
            category.name
          }}</div>

          <!-- 显示更多 -->
          <div class="category-title-more cursor-pointer" @click="onClickCoverOrLoadMoreArticles(category)">更多>></div>
        </div>
        <div style="height: 1px; width: 100%">
          <a-divider style="border-color: #ccc; height: 1px" />
        </div>
      </template>
    </a-list>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';

import { useGlobSetting } from '/@/hooks/setting';
import { getImageFileApi } from '/@/api/platform/file';

import { useGo } from '/@/hooks/web/usePage';
import { useCmsStore } from '/@/store/modules/cms';

import { getDisplayCategory } from '/@/api/cms/display';

export default defineComponent({
  name: 'CmsCategoryChildCovers',
  props: {
    category: {},
  },
  components: {
    LeftCircleOutlined,
    RightCircleOutlined,
  },
  setup(props, context) {
    console.log('CmsCategoryChildCovers.vue get props', props);

    const { apiUrl, globalProjectCode } = useGlobSetting();
    const go = useGo();
    //使用store必须在setup中，否则会报错
    const cmsStore = useCmsStore();

    const projectCode = ref<String>(globalProjectCode);

    const getImageFileUrlPrefix = ref<string>(apiUrl + getImageFileApi);

    const currentCategoryChildsData = reactive({
      childs: [],
    });

    //获取指定栏目显示信息
    getCategoryDisplayData();
    function getCategoryDisplayData() {
      getDisplayCategory(props.category.id).then((res) => {
        // console.log('指定栏目显示信息', res);
        if (res.childs != null) {
          res.childs.forEach((child) => {
            currentCategoryChildsData.childs.push(child.category);
          });
        }
      });
    }

    // 点击封面图片或更多跳转对应栏目的文章列表
    const onClickCoverOrLoadMoreArticles = (category: any) => {
      // console.log('onClickCoverOrLoadMoreArticles', category);
      let categoryId = category.id;

      //使用store存储跳转路由需传递的数据
      cmsStore.setCmsRouteParam({
        isArticle: false,
        id: categoryId,
        data: category,
      });
      go('/cms/category/' + categoryId);
    };

    return {
      getCategoryDisplayData,
      currentCategoryChildsData,
      getImageFileUrlPrefix,
      onClickCoverOrLoadMoreArticles,
      projectCode,
    };
  },
});
</script>
<style scoped lang="less">
@import './cms.less';

//覆盖antd的默认演示，解决头部高度过大的问题
.ant-list:deep(.ant-list-header) {
  // line-height: 1;
  padding-bottom: 0px;
}

.ant-list-items {
  list-style: none;
  display: inline-block;
  clear: both;
}

.cms-category-container .category-article-row {
  float: left;
  width: 351px;
  height: 99px;
  margin: 10px 10px 0px 0px;
}

.coverImg img {
  border: 1px solid #d8d8d8;
  padding: 2px;
  width: 351px;
  height: 99px;
}
</style>
